<template>
	<view class="pageView">
		<u-loading-page :loading="commonLoading" bg-color="#e8e8e8"></u-loading-page>
		<u-navbar
			title="全部评价"
			@leftClick="handleLeftClick"
		>
		</u-navbar>
		<view class="pagetitle">
			<view>用户评价({{ commonTotal }})</view>
			<u-divider></u-divider>
		</view>
		<scroll-view
		  style="height: 79vh;padding: 0px 32rpx;"
			scroll-y="true"
			@scrolltolower="handleScrolltolower"
		>
			<view v-for="(item, index) in commonList" :key="index" style="padding-top: 40rpx;">
				<view class="commonItemHead">
					<view class="commonItemHead-user">
						<image :src="item.user.avatar_url"></image>
						<view>{{ item.user.name }}</view>
					</view>
					<view class="commonItemHead-right">{{ item.created_at }}</view>
				</view>
				<view class="commonItemContent">{{ item.content }}</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { getCommentList } from '@/api/common.js'
	export default{
		data() {
			return {
				commonLoading: false,
				commonList: [],
				commonTotal: 0
			}
		},
		onShow() {
			this.page = 1
			this.commonList = []
			this.getList()
		},
		methods: {
			handleLeftClick() {
				uni.navigateTo({
					url: '/pages/productDetail/productDetail'
				})
			},
			getList() {
				this.commonLoading = true
				getCommentList({
					id: uni.getStorageSync('productDetail').id,
					page: this.page
				}).then(res => {
					const { code, data } = res
					console.log(data)
					if (code == 200001) {
						if (this.commonList.length == 0) {
							this.commonList = data.data
						} else {
							this.commonList = this.commonList.concat(data.data)
						}
						this.commonTotal = data.total
						this.lastPage = data.last_page
					}
					this.commonLoading = false
				}).catch(e => {
					this.commonLoading = false
				})
			},
			handleScrolltolower() {
				if (this.page < this.lastPage) {
					this.page++
					this.getList()
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.pagetitle{
		padding-top: 220rpx;
		padding-left: 32rpx;
		padding-right: 32rpx;
		font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
		font-weight: normal;
		font-size: 32rpx;
		color: #333333;
	}
	.commonItemHead{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 686rpx;
		&-user{
			display: flex;
			align-items: center;
			image{
				width: 56rpx;
				height: 56rpx;
				border-radius: 100% 100%;
			}
			view{
				padding-left: 16rpx;
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
			}
		}
		&-right{
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: normal;
			font-size: 24rpx;
			color: #999999;
		}
	}
	.commonItemContent{
		font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 28rpx;
		color: #666666;
		padding-left: 72rpx;
		padding-top: 10rpx;
	}
</style>